<template>
  <div class="top">
    <div></div>
    <div class="top-center">
      <div
        :class="['top-center-icon', { active: agentType === 'pc' }]"
        @click="changeAgent('pc')"
      >
        <DesktopOutlined style="font-size: 20px" />
      </div>
      <div
        :class="['top-center-icon', { active: agentType === 'tablet' }]"
        @click="changeAgent('tablet')"
      >
        <TabletOutlined style="font-size: 20px" />
      </div>
      <div
        :class="['top-center-icon', { active: agentType === 'phone' }]"
        @click="changeAgent('phone')"
      >
        <MobileOutlined style="font-size: 20px" />
      </div>
    </div>
    <div class="top-right">
      <div class="top-right-operator">
        <ArrowLeftOutlined
          :style="{
            fontSize: '18px',
            opacity: `${
              globalState.step > globalState.beginIndex ? '0.7' : '0.2'
            }`,
          }"
          @click="backOff"
        />
        <ArrowRightOutlined
          :style="{
            fontSize: '20px',
            opacity: `${hasMore ? '0.7' : '0.2'}`,
          }"
          @click="forward"
        />
      </div>
      <div class="top-right-function">
        <Button size="small" type="primary" danger @click="onDeleteCom">
          删除
        </Button>
        <Button
          border
          size="small"
          @click="absolute = !absolute"
          :type="absolute ? 'dashed' : 'primary'"
          >{{ absolute ? "绝对定位" : "静态定位" }}</Button
        >
        <Button size="small" @click="save">保 存</Button>
        <Button size="small" @click="$refs.file.click()">导入 Json</Button>
        <Button size="small" @click="reset" type="primary">重 置</Button>
        <Button size="small" @click="jump2Preview" type="primary">
          预览
        </Button>
        <Button size="small" @click="release" type="primary"> 发 布 </Button>
      </div>
      <!-- 隐藏起来的json输入 -->
      <input
        type="file"
        ref="file"
        id="file"
        accept=".json"
        @change="importJSON"
        style="display: none"
      />
    </div>
  </div>
</template>

<script setup>
import {
  ArrowLeftOutlined,
  ArrowRightOutlined,
  MobileOutlined,
  DesktopOutlined,
  TabletOutlined,
} from "@ant-design/icons-vue";
import { Button } from "ant-design-vue";

import useGetState from "@/utils/useGetState";
import { computed, toRefs, ref } from "vue";
import { useStore } from "vuex";
import { useRouter } from "vue-router";

const store = useStore();
const { agentType } = useGetState(store, ["agentType"]);

const props = defineProps({
  globalState: {
    type: Object,
    required: true,
  },
});
const emit = defineEmits(["update:globalState"]);
const { globalState } = toRefs(props);
const tempGlobalState = computed({
  get: () => globalState.value,
  set: (val) => emit("update:globalState", val),
});
const changeAgent = (val) => {
  store.commit("setAgentType", val);
};

const absolute = ref(false);
const backOff = () => {
  const { step, beginIndex } = globalState.value;
  if (step > beginIndex) {
    tempGlobalState.value.step--;
    tempGlobalState.value.isRoll = true;
    let newData = JSON.parse(
      sessionStorage.getItem(String(globalState.value.step))
    );
    store.commit("setCenterView", newData);
  }
};
const forward = () => {
  let newData = sessionStorage.getItem(String(globalState.value.step + 1));
  if (newData) {
    tempGlobalState.value.step++;
    tempGlobalState.value.isRoll = true;
    let newData = JSON.parse(
      sessionStorage.getItem(String(globalState.value.step))
    );
    store.commit("setCenterView", newData);
  }
};
const onDeleteCom = () => {
  store.dispatch("deleteCom");
};
const save = () => {};
const reset = () => {
  store.commit("resetCenterView");
};
const release = () => {};

const router = useRouter();
const jump2Preview = () => {
  router.push("/preview");
};
const hasMore = computed(
  () => !!sessionStorage.getItem(String(globalState.value.step + 1))
);
const importJSON = (e) => {
  // 导入json
  let file = e.target.files[0];
  let reader = new FileReader();
  //将文件读取成string字符串
  reader.readAsText(file);
  //onload函数中的this是FileReader，需要先传入this
  var _this = this;
  reader.onload = function () {
    // this.result为读取到的json字符串，需转成json对象
    let data = JSON.parse(this.result);
    // console.log(data, '-----------------导入成功')
    // _this.$bus.emit('importJSON', data)
  };
};
</script>

<style lang="less" scoped>
.top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  background: #eee;
  height: 39px;
  opacity: 1;
  background: rgba(255, 255, 255, 1);
  margin-bottom: 2px;
  border-bottom: 1px solid #eee;
  position: sticky;
  z-index: 9;
  top: 0px;

  &-left-logo {
    width: 130.8px;
    height: 36px;
    opacity: 0;
  }

  &-center {
    display: flex;
    width: 67px;
    height: 30px;
    align-items: center;

    &-icon {
      cursor: pointer;
      margin-right: 4px;
      padding: 6px;
      border-radius: 5px;
      opacity: 0.7;
      &:hover {
        background: #f2f2f2;
      }
    }
  }

  &-right {
    display: flex;
    justify-content: space-between;
    align-items: center;

    &-operator {
      display: flex;
      width: 60px;
      height: 40px;
      align-items: center;
      justify-content: space-around;
    }

    &-operator img {
      width: 20px;
      height: 20px;
    }

    &-function {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      margin-left: 15px;
      margin-right: 3px;
      gap: 6px;
    }
  }
}

.active {
  background: #f2f2f2;
}

.restore {
  transform: rotateY(180deg);
}

.show {
  opacity: 0.5;
}

.show:hover {
  opacity: 0.6;
  cursor: pointer;
}
</style>
